<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>snakes|贪吃蛇</title>
    <link rel="icon" href="./蛇.png">
</head>

<body>
    <div id="snakes-container" class="card">
        <!-- 主内容 -->
        <div id="main" class="card__content ">
            <!-- 顶部 -->
            <div class="main-top-contianer">
                <!-- 模式选择 -->
                <div class="radio-input" id="mode-selection">
                    <input checked="" value="color-1" name="color" id="color-1" type="radio">
                    <label for="color-1">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                                <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <g id="Interface / Check">
                                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                                            stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector">
                                        </path>
                                    </g>
                                </g>
                            </svg>
                        </span>
                    </label>

                    <input value="color-2" name="color" id="color-2" type="radio">
                    <label for="color-2">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                                <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <g id="Interface / Check">
                                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                                            stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector">
                                        </path>
                                    </g>
                                </g>
                            </svg>
                        </span>
                    </label>

                    <input value="color-3" name="color" id="color-3" type="radio">
                    <label for="color-3">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                                <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <g id="Interface / Check">
                                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                                            stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector">
                                        </path>
                                    </g>
                                </g>
                            </svg>
                        </span>
                    </label>

                </div>
                <!-- 记分牌 -->
                <div class="scoreboard" id="scoreboard">
                    <div class="content">
                        <div><span>长度:</span>&nbsp;<span id="scoreboard-snake-len"></span></div>
                        <div><span>进度:</span>&nbsp;<span id="scoreboard-progress"></span></div>
                    </div>
                    <!-- 进度条 -->
                    <div class="progress" id="scoreboard-progressBar" style="right: 100%;"></div>
                </div>
            </div>
            <!-- 移动区域 -->
            <div class="move-areangArea" id="move-area">
                <!-- 蛇 -->
                <div id="snake">
                    <div class="item" id="snake-head"></div>
                </div>
                <!-- 食物 -->
                <div id="food">
                    <!-- <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div> -->
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="btn-container">
                <button class="btn" id="btn-start" type="button">
                    <strong>开始游戏</strong>
                    <span class="btn-info">(按任意方向键开始)</span>
                    <div id="container-stars">
                        <div id="stars"></div>
                    </div>

                    <div id="glow">
                        <div class="circle"></div>
                        <div class="circle"></div>
                    </div>
                </button>
                <button class="btn" id="btn-restart" type="button" style="display: none;">
                    <strong>重新开始</strong>
                    <span class="btn-info">(tips:滑动屏幕也可以控制移动哟)</span>
                    <span class="btn-info"></span>
                    <div id="container-stars">
                        <div id="stars"></div>
                    </div>

                    <div id="glow">
                        <div class="circle"></div>
                        <div class="circle"></div>
                    </div>
                </button>
                <button class="btn" id="btn-suspend" type="button" style="display: none;">
                    <strong>暂停</strong>
                    <div id="container-stars">
                        <div id="stars"></div>
                    </div>

                    <div id="glow">
                        <div class="circle"></div>
                        <div class="circle"></div>
                    </div>
                </button>
                <button class="btn" id="btn-continue" type="button" style="display: none;">
                    <strong>继续</strong>
                    <div id="container-stars">
                        <div id="stars"></div>
                    </div>

                    <div id="glow">
                        <div class="circle"></div>
                        <div class="circle"></div>
                    </div>
                </button>
            </div>
        </div>
        <div class="copyright">
            <span>©︎ Maofu 2023</span>
        </div>
        <!-- 对话框 -->
        <div id="dialog" style="display: none;">
            <div class="img">
                <div id="dialog-title">标题</div>
                <div id="dialog-info">
                    信息
                </div>
            </div>
            <div class="btn-container">
                <button class="" id="dialog-confirm">
                    <span>好滴✔️</span>
                    <br>
                    <span class="btn-info">(按回车键可关闭窗口)</span>
                </button>
            </div>
        </div>
    </div>

</body>

</html>